<template>
    <el-container>
        <!-- <el-header class="header-tabs">
                <el-tabs type="card" v-model="search.status" @tab-change="activityStatusTabChange">
                    <el-tab-pane label="所有" :name="0"></el-tab-pane>
                    <el-tab-pane label="即将开始" :name="1"></el-tab-pane>
                    <el-tab-pane label="进行中" :name="2"></el-tab-pane>
                    <el-tab-pane label="已结束" :name="3"></el-tab-pane>
                    <el-tab-pane label="已取消" :name="-1"></el-tab-pane>
                </el-tabs>
            </el-header> -->
        <el-header>
            <div class="left-panel">
                <div class="right-panel-search">
                    <el-input v-model="search.keyword" placeholder="评论人" clearable></el-input>
                    <el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button>
                </div>
            </div>
        </el-header>
        <el-main class="nopadding">
            <scTable ref="table" :apiObj="list.apiObj" :params="list.params" row-key="id" stripe>
                <el-table-column label="#ID" prop="id" width="50"></el-table-column>
                <el-table-column label="评论人" prop="user.username" width="100">
                    <template #default="scope">
                        <div><el-avatar shape="square" :size="50" :src="scope.row.user.headimgurl" /></div>
                        <div>{{ scope.row.user.username }}</div>
                    </template>
                </el-table-column>
                <el-table-column label="图组" prop="link" width="100">
                    <template #default="scope">
                        <el-image v-for="(item, index) in scope.row.link" :key="index" style="width: 50px; height: 50px"
                            :src="item" :zoom-rate="1.2" :max-scale="7" :min-scale="0.2" :preview-src-list="scope.row.link"
                            :initial-index="4" fit="cover" preview-teleported />
                    </template>
                </el-table-column>
                <el-table-column label="内容" prop="content" width="120"></el-table-column>
                <el-table-column label="回复内容" prop="reply" width="150"></el-table-column>
                <el-table-column label="回复时间" prop="reply_time" width="150"></el-table-column>
                <el-table-column label="是否显示" prop="is_show" width="100">
                    <template #default="scope">
                        <el-tag type="success" v-if="scope.row.is_show">显示</el-tag>
                        <el-tag type="warning" v-else>不显示</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="评论时间" prop="create_time" width="180"></el-table-column>
                <el-table-column label="操作" fixed="right" align="right" width="150">
                    <template #default="scope">
                        <el-button-group>
                            <el-button text type="primary" size="small" @click="reply(scope.row)">回复</el-button>
                            <el-button text type="primary" size="small" @click="check(scope.row)">审核</el-button>
                        </el-button-group>
                    </template>
                </el-table-column>

            </scTable>
        </el-main>
    </el-container>
    <reply-dialog v-if="dialog.reply" ref="replyDialog" @success="onOperateSucccess"
        @closed="dialog.reply = false"></reply-dialog>
</template>

<script>
import replyDialog from "./reply"

export default {
    name: 'registrationList',
    emits: ['closed'],
    components: {
        replyDialog
    },
    props: {
        activity: {
            type: Object,
            default: null
        }
    },
    data () {
        return {
            dialog: {
                reply: false
            },
            list: {
                apiObj: this.$API.app.activity.comment.list,
                params: {
                    activity_id: this.activity.id
                }
            },
            search: {
                status: 0,
                keyword: null
            }
        }
    },
    methods: {

        open () {
            this.visible = true;
            this.drawerTitle = this.activity.name
            return this;
        },
        reply (row) {
            console.log(row)
            this.dialog.reply = true
            this.$nextTick(() => {
                this.$refs.replyDialog.open().setData(row)
            })
        },

        check (row) {
            this.$messageBox.confirm(
                '通过审核之后，评论将会在前台显示！',
                '提示',
                {
                    confirmButtonText: '通过',
                    cancelButtonText: '不通过',
                    type: 'warning',
                }
            )
                .then(() => {
                    this.submitCheck(row.id, true)

                })
                .catch(() => {
                    this.submitCheck(row.id, false)
                })
        },

        submitCheck (id, status) {
            this.$API.app.activity.comment.check.post(id, { status })
                .then(() => {
                    this.$message({
                        type: 'success',
                        message: '操作成功',
                    })
                    this.refresh();
                })
        },

        //搜索
        upsearch () {
            this.$refs.table.upData(this.search);
        },

        onOperateSucccess () {
            this.refresh();
        },
        //本地更新数据
        refresh () {
            this.$refs.table.refresh()
        }
    }
}
</script>

<style></style>
